<template>
    <div class="container">
        
        <div class="row">
            <div class="col-3" style="margin-top: 20px;">
                <div class="card">
                    <div class="card-body" >
                        <img :src="$store.state.user.photo">
                    </div>
                </div>
            </div>

            <div class="col-9" style="margin-top: 20px;">
                <div class="card">
                    <div class="card-header">
                        <span style="font-size: 120%;">我的Snake</span>
                        <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#add-snake-button">
                            创建Snake
                        </button>
                      </div>

                    <div class="card-body">
                        <table class="table table-dark table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Snake名称</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="snake in Snakes" :key="snake.id">
                                <td>{{ snake.title }}</td>
                                <td> {{ snake.createTime }}</td>
                                <td>
                                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" :data-bs-target="'#update-snake-button-' + snake.id" @click="update_snake(snake)">修 改</button>
                                    <button type="button" style="margin-left: 10px;" class="btn btn-danger" @click="delete_snake(snake)">删 除</button>

                                    <!-- 修改snake弹窗 -->
                                    <div  class="modal fade " :id="'update-snake-button-' + snake.id" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog modal-xl" >
                                            <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 style="color: black" class="modal-title fs-5 " id="exampleModalLabel">修改Snake</h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="add-snake-title" class="form-label">名 称</label>
                                                    <input v-model="snake.title" type="text" class="form-control" id="add-snake-title" placeholder="请输入Snake名称">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="add-snake-description" class="form-label">Snake简介</label>
                                                    <textarea v-model="snake.description" class="form-control" id="add-snake-description" rows="3" placeholder="请输入Snake简介"></textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="add-snake-code" class="form-label">Snake代码</label>
                                                    <VAceEditor
                                                    v-model:value="snake.content"
                                                    @init="editorInit"
                                                    lang="java"
                                                    theme="textmate"
                                                    style="height: 300px" />
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <div class="error-message">{{ snake.error_message }}</div>
                                                <button type="button" class="btn btn-warning" @click="update_snake(snake)">保存修改</button>
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >取 消</button>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <!-- 创建Snake弹窗 -->
        <div  class="modal fade " id="add-snake-button" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog modal-xl" >
                <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">创建Snake</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="add-snake-title" class="form-label">名 称</label>
                        <input v-model="snakeAdd.title" type="text" class="form-control" id="add-snake-title" placeholder="请输入Snake名称">
                    </div>
                    <div class="mb-3">
                        <label for="add-snake-description" class="form-label">Snake简介</label>
                        <textarea v-model="snakeAdd.description" class="form-control" id="add-snake-description" rows="3" placeholder="请输入Snake简介"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="add-snake-code" class="form-label">Snake代码</label>
                        <VAceEditor
                            v-model:value="snakeAdd.content"
                            @init="editorInit"
                            lang="java"
                            theme="textmate"
                            style="height: 300px" />
                    </div>
                <div class="modal-footer">
                    <div class="error-message">{{ snakeAdd.error_message }}</div>
                    <button type="button" class="btn btn-primary" @click="add_snake()">创 建</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >取 消</button>
                </div>
                </div>
            </div>
        </div>
    </div>   
</div>
</template>

<script>
import { ref, reactive } from 'vue';
import $ from 'jquery'
import { useStore } from 'vuex';
import { Modal } from 'bootstrap/dist/js/bootstrap';
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
import "ace-builds/src-noconflict/mode-java"

export default {
    components: {
        VAceEditor,
    },
    setup() {
        // 代码编辑器配置
        ace.config.set(
        "basePath", 
        "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
        let Snakes = ref([]);
        const store = useStore();
        const snakeAdd = reactive({
            title: "",
            description: "",
            content: "",
            error_message: "",
        })
        const refresh_bots = () => {
            $.ajax({
                url: "http://localhost:3000/user/snake/getList",
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(response) {
                    Snakes.value = response;
                },
            })
        };

        refresh_bots();

        const add_snake = () => { // 增加Snake
            snakeAdd.error_message = "";
            $.ajax({
                url: "http://localhost:3000/user/snake/add",
                type: "post",
                data: {
                    title: snakeAdd.title,
                    description: snakeAdd.description,
                    content: snakeAdd.content
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(response) {
                    if (response.error_message === "success") {
                        snakeAdd.title = "";
                        snakeAdd.content = "";
                        snakeAdd.description = "";
                        Modal.getInstance("#add-snake-button").hide(); // 创建成功后隐藏弹框
                        refresh_bots();
                    } else {
                        snakeAdd.error_message = response.error_message;
                    }
                },
                error(response) {
                    snakeAdd.error_message = response.error_message;
                }
            })
        }

        const delete_snake = (Snakes) => { // 删除snake
            $.ajax({
                url: "http://localhost:3000/user/snake/remove",
                type: "post",
                data: {
                    snake_id: Snakes.id,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(response) {
                    if (response.error_message === "success") {
                        refresh_bots();
                    }
                },
            })
        }

        // 更新snake
        const update_snake = (snake) => {
            $.ajax({
                url: "http://localhost:3000/user/snake/update",
                type: "post",
                data: {
                    ...snake,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success() {
                    console.log(snake)
                    Modal.getInstance("#update-snake-button-" + snake.id).hide(); // 创建成功后隐藏弹框
                    refresh_bots();
                }
            })
        }

        return {
            Snakes,
            snakeAdd,
            add_snake,
            delete_snake,
            update_snake,
        }
    }
}
</script>

<style scoped>

img {
    width: 100%;
    height: 100%;
}

div.error-message {
    color: red;
}
</style>